<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>zaoText - Markdown 编辑器</title>
    <link rel="stylesheet" href="libs/tailwind.min.css">
    <script src="libs/react.development.js"></script>
    <script src="libs/react-dom.development.js"></script>
    <script src="libs/babel.min.js"></script>
    <script src="libs/marked.min.js"></script>

    <style>
        /* Tailwind CSS 替代样式 */
        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        }

        .h-screen { height: 100vh; }
        .flex { display: flex; }
        .flex-col { flex-direction: column; }
        .flex-1 { flex: 1; }
        .w-1\/2 { width: 50%; }
        .w-full { width: 100%; }
        .h-full { height: 100%; }
        .items-center { align-items: center; }
        .justify-between { justify-content: space-between; }
        .space-x-2 > * + * { margin-left: 0.5rem; }
        .p-3 { padding: 0.75rem; }
        .p-2 { padding: 0.5rem; }
        .p-4 { padding: 1rem; }
        .p-6 { padding: 1.5rem; }
        .p-1 { padding: 0.25rem; }
        .p-1\.5 { padding: 0.375rem; }
        .px-4 { padding-left: 1rem; padding-right: 1rem; }
        .py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
        .ml-1 { margin-left: 0.25rem; }
        .mx-2 { margin-left: 0.5rem; margin-right: 0.5rem; }
        .mb-4 { margin-bottom: 1rem; }
        .mt-6 { margin-top: 1.5rem; }
        .mt-5 { margin-top: 1.25rem; }
        .mt-4 { margin-top: 1rem; }
        .mb-3 { margin-bottom: 0.75rem; }
        .mb-2 { margin-bottom: 0.5rem; }
        .mb-1 { margin-bottom: 0.25rem; }
        .pl-4 { padding-left: 1rem; }
        .pl-6 { padding-left: 1.5rem; }
        .bg-white { background-color: #ffffff; }
        .bg-gray-100 { background-color: #f3f4f6; }
        .bg-gray-200 { background-color: #e5e7eb; }
        .bg-gray-700 { background-color: #374151; }
        .bg-gray-800 { background-color: #1f2937; }
        .bg-gray-900 { background-color: #111827; }
        .bg-gray-600 { background-color: #4b5563; }
        .text-gray-600 { color: #4b5563; }
        .text-gray-700 { color: #374151; }
        .text-gray-300 { color: #d1d5db; }
        .text-gray-900 { color: #111827; }
        .text-gray-100 { color: #f3f4f6; }
        .text-orange-500 { color: #f97316; }
        .text-yellow-500 { color: #eab308; }
        .text-blue-600 { color: #2563eb; }
        .text-blue-400 { color: #60a5fa; }
        .text-red-500 { color: red; }
        .text-sm { font-size: 0.875rem; }
        .text-3xl { font-size: 1.875rem; }
        .text-2xl { font-size: 1.5rem; }
        .text-xl { font-size: 1.25rem; }
        .font-bold { font-weight: bold; }
        .font-medium { font-weight: 500; }
        .font-mono { font-family: Monaco, Menlo, 'Ubuntu Mono', monospace; }
        .leading-relaxed { line-height: 1.625; }
        .border-b { border-bottom-width: 1px; }
        .border-r { border-right-width: 1px; }
        .border { border-width: 1px; }
        .border-l-4 { border-left-width: 4px; }
        .border-gray-200 { border-color: #e5e7eb; }
        .border-gray-300 { border-color: #d1d5db; }
        .border-gray-600 { border-color: #4b5563; }
        .border-gray-700 { border-color: #374151; }
        .rounded-lg { border-radius: 0.5rem; }
        .rounded { border-radius: 0.25rem; }
        .shadow-sm { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); }
        .shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); }
        .overflow-hidden { overflow: hidden; }
        .overflow-auto { overflow: auto; }
        .overflow-x-auto { overflow-x: auto; }
        .resize-none { resize: none; }
        .outline-none { outline: none; }
        .transition-colors { transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out; }
        .transition-all { transition: all 0.15s ease-in-out; }
        .cursor-pointer { cursor: pointer; }
        .hidden { display: none; }
        .block { display: block; }
        .relative { position: relative; }
        .absolute { position: absolute; }
        .top-full { top: 100%; }
        .left-0 { left: 0; }
        .mt-1 { margin-top: 0.25rem; }
        .z-10 { z-index: 10; }
        .opacity-0 { opacity: 0; }
        .invisible { visibility: hidden; }
        .text-left { text-align: left; }
        .max-w-none { max-width: none; }
        .w-px { width: 1px; }
        .h-6 { height: 1.5rem; }
        .italic { font-style: italic; }
        .border-collapse { border-collapse: collapse; }

        /* Dark mode styles */
        .dark .bg-gray-900 { background-color: #111827; }
        .dark .bg-gray-800 { background-color: #1f2937; }
        .dark .bg-gray-700 { background-color: #374151; }
        .dark .bg-gray-600 { background-color: #4b5563; }
        .dark .text-gray-100 { color: #f3f4f6; }
        .dark .text-gray-300 { color: #d1d5db; }
        .dark .text-gray-400 { color: #9ca3af; }
        .dark .border-gray-700 { border-color: #374151; }
        .dark .border-gray-600 { border-color: #4b5563; }

        /* Hover states */
        .hover\:bg-gray-200:hover { background-color: #e5e7eb; }
        .hover\:bg-gray-300:hover { background-color: #d1d5db; }
        .hover\:bg-gray-100:hover { background-color: #f3f4f6; }
        .dark .hover\:bg-gray-700:hover { background-color: #374151; }
        .dark .hover\:bg-gray-600:hover { background-color: #4b5563; }

        .group:hover .group-hover\:opacity-100 { opacity: 1; }
        .group:hover .group-hover\:visible { visibility: visible; }

        /* Prose styles */
        .prose {
            color: #374151;
            max-width: none;
        }
        .prose h1 {
            font-size: 1.875rem;
            font-weight: bold;
            margin-bottom: 1rem;
            margin-top: 1.5rem;
            color: #111827;
        }
        .prose h2 {
            font-size: 1.5rem;
            font-weight: bold;
            margin-bottom: 0.75rem;
            margin-top: 1.25rem;
            color: #111827;
        }
        .prose h3 {
            font-size: 1.25rem;
            font-weight: bold;
            margin-bottom: 0.5rem;
            margin-top: 1rem;
            color: #111827;
        }
        .prose p {
            margin-bottom: 1rem;
            line-height: 1.625;
            color: #374151;
        }
        .prose ul, .prose ol {
            margin-bottom: 1rem;
            padding-left: 1.5rem;
            color: #374151;
        }
        .prose li {
            margin-bottom: 0.25rem;
        }
        .prose blockquote {
            border-left: 4px solid #d1d5db;
            padding-left: 1rem;
            font-style: italic;
            margin-bottom: 1rem;
            color: #6b7280;
        }
        .prose code {
            background-color: #f3f4f6;
            padding: 0.125rem 0.25rem;
            border-radius: 0.25rem;
            font-size: 0.875rem;
            font-family: Monaco, Menlo, 'Ubuntu Mono', monospace;
            color: #1f2937;
        }
        .prose pre {
            background-color: #f3f4f6;
            padding: 1rem;
            border-radius: 0.5rem;
            overflow-x: auto;
            margin-bottom: 1rem;
        }
        .prose table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 1rem;
        }
        .prose th, .prose td {
            border: 1px solid #d1d5db;
            padding: 0.5rem 1rem;
            color: #374151;
        }
        .prose th {
            background-color: #f3f4f6;
            font-weight: bold;
        }
        .prose a {
            color: #2563eb;
        }
        .prose a:hover {
            color: #1d4ed8;
        }

        /* Dark mode prose */
        .dark .prose {
            color: #d1d5db;
        }
        .dark .prose h1,
        .dark .prose h2,
        .dark .prose h3 {
            color: #f3f4f6;
        }
        .dark .prose p,
        .dark .prose ul,
        .dark .prose ol {
            color: #d1d5db;
        }
        .dark .prose blockquote {
            border-left-color: #4b5563;
            color: #9ca3af;
        }
        .dark .prose code {
            background-color: #1f2937;
            color: #e5e7eb;
        }
        .dark .prose pre {
            background-color: #1f2937;
        }
        .dark .prose th,
        .dark .prose td {
            border-color: #4b5563;
            color: #d1d5db;
        }
        .dark .prose th {
            background-color: #1f2937;
        }
        .dark .prose a {
            color: #60a5fa;
        }
        .dark .prose a:hover {
            color: #93c5fd;
        }

        .whitespace-nowrap { white-space: nowrap; }
        textarea {
            font-family: Monaco, Menlo, 'Ubuntu Mono', monospace;
            line-height: 1.6;
            white-space: nowrap;
            overflow-wrap: normal;
        }
    </style>
</head>
<body>
    <div id="root"></div>

    <script type="text/babel">
        const { useState, useEffect, useRef } = React;

        const defaultContent = `# 欢迎使用 zaoText

这是一个功能完整的 Mac 风格 Markdown 编辑器。

## 功能特性

- **实时预览** - 支持分屏显示编辑器和预览
- **语法高亮** - 完整的 Markdown 语法支持
- **主题切换** - 明暗主题自由切换
- **文件管理** - 打开、保存文件
- **导出功能** - 支持导出 HTML
- **快捷键** - 常用快捷键支持

## 快捷键

- ⌘N - 新建文件
- ⌘O - 打开文件
- ⌘S - 保存文件
- ⌘⇧P - 切换预览模式

## 示例内容

### 代码块

\`\`\`javascript
const greeting = 'Hello, World!';
console.log(greeting);
\`\`\`

### 表格

| 功能 | 描述 | 状态 |
|------|------|------|
| 编辑器 | 简单文本编辑 | ✅ |
| 预览 | Marked.js | ✅ |
| 主题 | 明暗切换 | ✅ |

### 引用

> 这是一个引用示例。Markdown 让文档编写变得简单而优雅。

### 列表

- 无序列表项 1
- 无序列表项 2
  - 嵌套列表项
  - 另一个嵌套项

1. 有序列表项 1
2. 有序列表项 2
3. 有序列表项 3

**开始编写你的 Markdown 文档吧！**`;

        // 图标组件
        const FileIcon = () => (
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                <path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"/>
                <polyline points="13,2 13,9 20,9"/>
            </svg>
        );

        const FolderOpenIcon = () => (
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                <path d="M3 7v10a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-6l-2-2H5a2 2 0 0 0-2 2z"/>
            </svg>
        );

        const SaveIcon = () => (
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/>
                <polyline points="17,21 17,13 7,13 7,21"/>
                <polyline points="7,3 7,8 15,8"/>
            </svg>
        );

        const DownloadIcon = () => (
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
                <polyline points="7,10 12,15 17,10"/>
                <line x1="12" y1="15" x2="12" y2="3"/>
            </svg>
        );

        const MoonIcon = () => (
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
            </svg>
        );

        const SunIcon = () => (
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                <circle cx="12" cy="12" r="5"/>
                <line x1="12" y1="1" x2="12" y2="3"/>
                <line x1="12" y1="21" x2="12" y2="23"/>
                <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/>
                <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/>
                <line x1="1" y1="12" x2="3" y2="12"/>
                <line x1="21" y1="12" x2="23" y2="12"/>
                <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/>
                <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>
            </svg>
        );

        const EditIcon = () => (
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
                <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
            </svg>
        );

        const EyeIcon = () => (
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
                <circle cx="12" cy="12" r="3"/>
            </svg>
        );

        const SplitIcon = () => (
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
                <line x1="12" y1="3" x2="12" y2="21"/>
            </svg>
        );

        function App() {
            const [content, setContent] = useState(defaultContent);
            const [isDark, setIsDark] = useState(false);
            const [viewMode, setViewMode] = useState('split');
            const [fileName, setFileName] = useState('未命名.md');
            const [isSaved, setIsSaved] = useState(true);
            const [isEditingName, setIsEditingName] = useState(false);
            const [editName, setEditName] = useState('未命名.md');
            const fileInputRef = useRef(null);
            const nameInputRef = useRef(null);

            useEffect(() => {
                if (isDark) {
                    document.documentElement.classList.add('dark');
                } else {
                    document.documentElement.classList.remove('dark');
                }
            }, [isDark]);

            useEffect(() => {
                const handleKeyDown = (e) => {
                    if (e.metaKey || e.ctrlKey) {
                        switch (e.key) {
                            case 'n':
                                e.preventDefault();
                                handleNewFile();
                                break;
                            case 'o':
                                e.preventDefault();
                                handleOpenFile();
                                break;
                            case 's':
                                e.preventDefault();
                                handleSaveFile();
                                break;
                            case 'p':
                                if (e.shiftKey) {
                                    e.preventDefault();
                                    setViewMode(prev => prev === 'preview' ? 'split' : 'preview');
                                }
                                break;
                        }
                    }
                };

                window.addEventListener('keydown', handleKeyDown);
                return () => window.removeEventListener('keydown', handleKeyDown);
            }, []);

            const handleContentChange = (e) => {
                setContent(e.target.value);
                setIsSaved(false);
            };

            const handleNewFile = () => {
                if (!isSaved) {
                    const shouldDiscard = window.confirm('当前文件未保存，是否丢弃更改？');
                    if (!shouldDiscard) return;
                }
                setContent('');
                setFileName('未命名.md');
                setIsSaved(true);
            };

            const handleOpenFile = () => {
                fileInputRef.current?.click();
            };

            const handleFileSelect = async (e) => {
                const file = e.target.files?.[0];
                if (!file) return;

                try {
                    const content = await file.text();
                    setContent(content);
                    setFileName(file.name);
                    setIsSaved(true);
                } catch (error) {
                    alert('读取文件失败');
                }
                e.target.value = '';
            };

            const handleSaveFile = () => {
                const blob = new Blob([content], { type: 'text/markdown' });
                const url = URL.createObjectURL(blob);
                const a = document.createElement('a');
                a.href = url;
                a.download = fileName;
                a.click();
                URL.revokeObjectURL(url);
                setIsSaved(true);
            };

            const handleExportHTML = () => {
                const html = `<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Markdown Export</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            line-height: 1.6;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            color: #333;
        }
    </style>
</head>
<body>
    ${marked.parse(content)}
</body>
</html>`;
                const blob = new Blob([html], { type: 'text/html' });
                const url = URL.createObjectURL(blob);
                const a = document.createElement('a');
                a.href = url;
                a.download = fileName.replace(/\.md$/, '.html');
                a.click();
                URL.revokeObjectURL(url);
            };

            const getPreviewHTML = () => {
                try {
                    return marked.parse(content);
                } catch (error) {
                    return '<p style="color: red;">Markdown 解析错误</p>';
                }
            };

            // 文件名编辑相关函数
            const handleNameDoubleClick = () => {
                setIsEditingName(true);
                setEditName(fileName);
            };

            const handleNameKeyDown = (e) => {
                if (e.key === 'Enter') {
                    handleNameSubmit();
                } else if (e.key === 'Escape') {
                    handleNameCancel();
                }
            };

            const handleNameSubmit = () => {
                const trimmedName = editName.trim();
                if (trimmedName && trimmedName !== fileName) {
                    const newName = trimmedName.endsWith('.md') ? trimmedName : `${trimmedName}.md`;
                    setFileName(newName);
                    setIsSaved(false);
                }
                setIsEditingName(false);
            };

            const handleNameCancel = () => {
                setEditName(fileName);
                setIsEditingName(false);
            };

            const handleNameBlur = () => {
                handleNameSubmit();
            };

            // 当进入编辑模式时聚焦输入框
            useEffect(() => {
                if (isEditingName && nameInputRef.current) {
                    nameInputRef.current.focus();
                    nameInputRef.current.select();
                }
            }, [isEditingName]);

            // 处理图片粘贴
            const handleImagePaste = (file) => {
                const reader = new FileReader();
                reader.onload = (e) => {
                    const dataUrl = e.target.result;
                    const fileName = file.name || `image_${Date.now()}.png`;
                    const imageMarkdown = `![${fileName}](${dataUrl})`;

                    // 在当前内容末尾添加图片
                    setContent(prev => prev + (prev.endsWith('\n') ? '' : '\n') + imageMarkdown + '\n');
                    setIsSaved(false);
                };
                reader.readAsDataURL(file);
            };

            // 粘贴事件监听
            useEffect(() => {
                const handlePaste = (e) => {
                    const items = e.clipboardData?.items;
                    if (!items) return;

                    for (let i = 0; i < items.length; i++) {
                        const item = items[i];
                        if (item.type.indexOf('image') !== -1) {
                            e.preventDefault();
                            const file = item.getAsFile();
                            if (file) {
                                handleImagePaste(file);
                            }
                            break;
                        }
                    }
                };

                document.addEventListener('paste', handlePaste);
                return () => document.removeEventListener('paste', handlePaste);
            }, []);

            return (
                <div className="h-screen flex flex-col bg-white dark:bg-gray-900">
                    {/* 工具栏 */}
                    <div className="flex items-center justify-between p-3 bg-gray-100 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
                        {/* 左侧文件操作 */}
                        <div className="flex items-center space-x-2">
                            <button
                                onClick={handleNewFile}
                                className="p-2 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg transition-colors"
                                title="新建文件 (⌘N)"
                            >
                                <FileIcon />
                            </button>
                            <button
                                onClick={handleOpenFile}
                                className="p-2 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg transition-colors"
                                title="打开文件 (⌘O)"
                            >
                                <FolderOpenIcon />
                            </button>
                            <button
                                onClick={handleSaveFile}
                                className="p-2 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg transition-colors"
                                title="保存文件 (⌘S)"
                            >
                                <SaveIcon />
                            </button>
                            <div className="w-px h-6 bg-gray-300 dark:bg-gray-600 mx-2" />
                            <button
                                onClick={handleExportHTML}
                                className="p-2 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg transition-colors"
                                title="导出为 HTML"
                            >
                                <DownloadIcon />
                            </button>
                        </div>

                        {/* 中间文件名 */}
                        <div className="flex items-center space-x-2">
                            {isEditingName ? (
                                <input
                                    ref={nameInputRef}
                                    type="text"
                                    value={editName}
                                    onChange={(e) => setEditName(e.target.value)}
                                    onKeyDown={handleNameKeyDown}
                                    onBlur={handleNameBlur}
                                    className="text-sm font-medium bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded px-2 py-1 focus:outline-none focus:ring-2 focus:ring-blue-500"
                                    placeholder="输入文件名..."
                                    style={{ minWidth: '120px' }}
                                />
                            ) : (
                                <span
                                    className="text-sm font-medium text-gray-700 dark:text-gray-300 cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-700 px-2 py-1 rounded transition-colors"
                                    onDoubleClick={handleNameDoubleClick}
                                    title="双击编辑文件名"
                                >
                                    {fileName}
                                    {!isSaved && <span className="ml-1 text-orange-500">●</span>}
                                </span>
                            )}
                        </div>

                        {/* 右侧视图和主题控制 */}
                        <div className="flex items-center space-x-2">
                            {/* 视图切换 */}
                            <div className="flex items-center bg-gray-200 dark:bg-gray-700 rounded-lg p-1">
                                <button
                                    onClick={() => setViewMode('editor')}
                                    className={`p-1.5 rounded transition-colors ${
                                        viewMode === 'editor'
                                            ? 'bg-white dark:bg-gray-600 shadow-sm'
                                            : 'hover:bg-gray-300 dark:hover:bg-gray-600'
                                    }`}
                                    title="仅编辑器"
                                >
                                    <EditIcon />
                                </button>
                                <button
                                    onClick={() => setViewMode('split')}
                                    className={`p-1.5 rounded transition-colors ${
                                        viewMode === 'split'
                                            ? 'bg-white dark:bg-gray-600 shadow-sm'
                                            : 'hover:bg-gray-300 dark:hover:bg-gray-600'
                                    }`}
                                    title="分屏模式"
                                >
                                    <SplitIcon />
                                </button>
                                <button
                                    onClick={() => setViewMode('preview')}
                                    className={`p-1.5 rounded transition-colors ${
                                        viewMode === 'preview'
                                            ? 'bg-white dark:bg-gray-600 shadow-sm'
                                            : 'hover:bg-gray-300 dark:hover:bg-gray-600'
                                    }`}
                                    title="仅预览"
                                >
                                    <EyeIcon />
                                </button>
                            </div>
                            <div className="w-px h-6 bg-gray-300 dark:bg-gray-600 mx-2" />
                            <button
                                onClick={() => setIsDark(!isDark)}
                                className="p-2 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg transition-colors"
                                title={isDark ? '切换到亮色主题' : '切换到暗色主题'}
                            >
                                {isDark ? <SunIcon /> : <MoonIcon />}
                            </button>
                        </div>
                    </div>

                    {/* 主内容区域 */}
                    <div className="flex-1 flex overflow-hidden">
                        {(viewMode === 'editor' || viewMode === 'split') && (
                            <div className={`${viewMode === 'split' ? 'w-1/2' : 'w-full'} border-r border-gray-200 dark:border-gray-700`}>
                                <textarea
                                    value={content}
                                    onChange={handleContentChange}
                                    className="w-full h-full p-4 bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 font-mono text-sm resize-none border-none outline-none"
                                    placeholder="开始编写你的 Markdown..."
                                    style={{ whiteSpace: 'nowrap', overflowWrap: 'normal', overflowX: 'auto' }}
                                />
                            </div>
                        )}

                        {(viewMode === 'preview' || viewMode === 'split') && (
                            <div className={`${viewMode === 'split' ? 'w-1/2' : 'w-full'} overflow-auto`}>
                                <div
                                    className="prose prose-lg max-w-none p-6 h-full bg-white dark:bg-gray-900"
                                    dangerouslySetInnerHTML={{ __html: getPreviewHTML() }}
                                />
                            </div>
                        )}
                    </div>

                    {/* 隐藏的文件输入 */}
                    <input
                        ref={fileInputRef}
                        type="file"
                        accept=".md,.markdown,.txt"
                        onChange={handleFileSelect}
                        className="hidden"
                    />
                </div>
            );
        }

        ReactDOM.render(<App />, document.getElementById('root'));
    </script>
</body>
</html>
